<template>
    <el-button type="primary" round @click="router.go(-1)">返回</el-button>
  <div class="content">
    <el-form :model="form" label-width="120px">

    <!-- 下拉框 -->
    <el-form-item >
    <span>接收人：</span>
      <el-select v-model="form.receiver" placeholder="请选择接收人">
        <el-option label="李老师" value="李老师" />
        <el-option label="杨老师" value="杨老师" />
      </el-select>
    </el-form-item>
  <!-- 时间选择 -->
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">用药日期：</span>
      <el-date-picker
        v-model="form.day"
        type="date"
        placeholder="Pick a day"
        :size="size"
      />
    </div>
   </div>
    <!-- 内容 -->
    <div class="text">
        <span>内容：</span>
        <input  type="textarea" v-model="form.remind" class="inp" placeholder="请输入" />
    </div>
    <!-- 提交 -->
    <el-form-item>
        <el-button type="primary" @click="onSubmit()">发送</el-button>
        <!-- <el-button>Cancel</el-button> -->
      </el-form-item>
</el-form>
</div>
</template>

<script setup>
import { ref ,reactive} from 'vue'
import { useRouter } from 'vue-router'
import {useStudentsleaveStore} from '../../../stores/Family-schoolInteractiongll/Studentsleave'
var $store = useStudentsleaveStore();
var router = useRouter()
// 下拉框
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref([])
const cities = ['杨老师', '李老师']
// 多选框
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: '杨老师',
  },
  {
    value: 'Option1',
    label: '李老师',
  },
  {
    value: 'Option1',
    label: '刘老师',
  },

]
// 时间选择
const value1 = ref('')
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
let form = reactive({
    id:'@id',
    num:$store.healthlist.list.length+1,
    name:'小涛',
    grade:'一年级一班',
    remind:'',
    day:'',
    promoter:'小九妈妈',
    time:'2022年十一月20日',
    receiver:'',
})
const onSubmit = () => {
    if(form.receiver !=''&& form.day !='' && form.remind !=''){
    // 发送请求将内容插入列表中
    console.log(form);
    console.log('submit!')
    $store.healthList_remind(form)
    }else{
        alert('请填入要发布的内容信息')
    }
}

</script>

<style scoped>
.choiceteach{
    width: 500px;
    height: 100px;
    background-color: rgba(249, 249, 249, 1);
    margin: 10px 60px;
}
.text{
    margin: 10px 0;
}
.inp{
    width: 500px;
    height: 100px;
    border: 1px solid #c0c4cc;
    outline: none;
}
.demo-date-picker{
    margin-left: 120px;
}
.text{
    margin-left: 120px;
}
</style>